<script setup lang="ts">
import { saveFileApi, downloadFileApi } from "@@/apis/entity"
import { ElMessage, ElMessageBox } from "element-plus"
import { useRoute } from "vue-router"
import { ref, watch } from "vue"
import { downloadFile } from "@/common/utils/fileUtils"


interface Props {
  id: string | undefined
  fileData: any
  visible: boolean
}
const props = defineProps<Props>()
const emit = defineEmits(["closeDialog"])
const dialogVisible = ref<boolean>(false)
const loading = ref<boolean>(false)
const tableData = ref([])
const route = useRoute()
function closeDialog() {
  emit("closeDialog", "refresh")
}
const handleView = (row: any) => {
  window.open(`/model-api${row.filePath}`, "_blank")
}
const handleDelete = (id: string) => {
  ElMessageBox.confirm("确定要删除该附件吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    const fd = new FormData()
    fd.append(`removeFiles[${0}].id`, id)
    fd.append(`businessId`, route.query.id)
    saveFileApi(fd).then((res: any) => {
      ElMessage.success("删除成功")
      tableData.value = tableData.value.filter((item: any) => item.id !== id)
    }).catch((err: any) => {
      ElMessage.error(err.message)
    })
  })
}
const handleDownload = (row: any) => {
  const params = {
    fileId: row.id,
    targetPath: ''
  }
  downloadFileApi(params).then((res: any) => {
    downloadFile(res)
  })
}
watch(
  () => [props.id, props.visible],
  () => {
    dialogVisible.value = props.visible
    tableData.value = props.fileData
  }
)
</script>

<template>
  <el-drawer v-model="dialogVisible" direction="rtl" size="900" :show-close="false" @close-auto-focus="closeDialog"
    @close="closeDialog">
    <template #header>
      <h4>附件</h4>
    </template>
    <template #default>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="fileName" label="文件名" width="380" />
        <el-table-column prop="fileSize" label="文件大小" width="180">
          <template #default="{ row }">
            <!-- 小数保留两位 -->
            {{ (row.fileSize / 1024 / 1024).toFixed(2) }}M
          </template>
        </el-table-column>
        <el-table-column prop="fileSuffix" label="文件类型" />
        <el-table-column fixed="right" label="操作" align="center" width="140">
          <template #default="scope">
            <el-space :size="12">
              <el-link :underline="false" @click.stop="handleView(scope.row)" title="查看">
                <el-icon :size="18">
                  <View />
                </el-icon>
              </el-link>
              <el-link :underline="false" @click.stop="handleDownload(scope.row)" title="下载">
                <el-icon :size="18">
                  <Download />
                </el-icon>
              </el-link>
              <el-link :underline="false" type="danger" @click.stop="handleDelete(scope.row.id)" title="删除">
                <el-icon :size="18">
                  <Delete />
                </el-icon>
              </el-link>
            </el-space>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button plain @click="closeDialog">
          退 出
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="scss" scoped>
.cpi-header-text {
  color: #fff !important;
}

:deep(.el-drawer__body) {
  width: 100%;
  height: 100%;
}

.el-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.drawertable-content {
  flex: 1;
}
</style>
